<template>
	<div class="components-list-item">
		<nuxt-link :to="{path: `/cookbook/info/${item.id}`}"><img :src="`${OSS_HOST}img/${item.id}.jpg?x-oss-process=image/resize,m_fill,h_100,w_100`" alt=""></nuxt-link>
		<nuxt-link :to="{path: `/cookbook/info/${item.id}`}" class="item-title" v-text="item.title"></nuxt-link>
		<div class="item-level">
			星级评分：<Icon type="ios-star"
				v-for="i in item.level"
				size="16"
				color="#ff7800"
				:key="i"/>
		</div>
		<div class="item-views">
			{{item.id * 0.1 + 1.9}}w <Icon type="ios-eye" size="18"/>

			<div class="item-like">
				<Icon size="18"
					@click.e="onLike"
					:type="`ios-heart${item.id % 3 == 0 ? '' : '-outline'}`"
					:color="item.id % 3 == 0 ? 'red' : ''"/>
			</div>
		</div>
	</div>
</template>

<script>
import { OSS_HOST } from '~config'
export default {
	data() {
		return { OSS_HOST }
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	methods: {
		onLike() {
			this.$Message.info('点击收藏按钮~');
		}
	}
}
</script>

<style lang="less" scoped>
	.components-list-item{
		background: #fff;
		position: relative;
		min-height: 100px;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 5px;
		padding-left: 100px;
		display: block;
		color: #010101;
		a{
			display: block;
		}
		img{
			display: block;
			width: 80px;
			position: absolute;
			left: 10px;
			top: 10px;
		}

		.item-title{
			color: #010101;
			font-size: 20px;
		}
		.item-level{
			font-size: 14px;
			line-height: 25px;
			i{
				vertical-align: middle;
			}
		}
		.item-views{
			font-size: 16px;
			position: absolute;
			left: 100px;
			right: 10px;
			bottom: 10px;
			.item-like{
				float: right;
			}
		}
	}
</style>